<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>搜索</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>.container{max-width:1200px;margin:0 auto;padding:16px}.img{width:100%;height:160px;object-fit:cover}</style>
</head>
<body>
<div id="app" class="container">
    <el-page-header @back="go('/')" content="搜索"></el-page-header>
    <div style="display:flex; gap:8px; margin-top:12px;">
        <el-input v-model="kw" placeholder="输入关键字" @keyup.enter.native="doSearch"></el-input>
        <el-button type="primary" @click="doSearch">搜索</el-button>
    </div>
    <el-row :gutter="16" style="margin-top:12px;">
        <el-col :span="6" v-for="p in list" :key="p.id" style="margin-bottom:16px;">
            <el-card shadow="hover">
                <img :src="p.coverImg" class="img" />
                <div style="margin-top:6px;">
                    <div>{{p.name}}</div>
                    <el-text type="danger">¥{{p.price}}</el-text>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <div style="display:flex;justify-content:center;margin-top:8px;">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="size" v-model:current-page="page" @current-change="load"></el-pagination>
    </div>
</div>
<script>
const { createApp, ref, onMounted } = Vue
createApp({
    setup(){
        const list = ref([])
        const page = ref(1)
        const size = ref(12)
        const total = ref(1000)
        const kw = ref(new URLSearchParams(location.search).get('keyword') || '')
        const go = (p)=>{ location.href = p }
        const load = async ()=>{
            const url = `/api/products?page=${page.value}&size=${size.value}&keyword=${encodeURIComponent(kw.value||'')}`
            list.value = await (await fetch(url)).json()
        }
        const doSearch = ()=>{ page.value = 1; load() }
        onMounted(load)
        return { list, kw, go, doSearch, page, size, total, load }
    }
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>


